<template>
  <view>
    <view class="live-list" :style="'padding:0 ' + (decoretionProperties.pagePadding+'px')">
      <block v-for="(item, index) in liveList" :key="index">
        <view class="live-list-item">
          <image :data-count="item.viewCount" :data-room_id="item.roomId" :data-id="item.id" @tap.stop="onGotoLive"
            :src="item.shareImg"></image>
          <view class="live-item-head">
            <span class="head-live" v-if="item.status === 101">
              <image src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/Live/live.png"></image>
              直播中
            </span>
            <span class="head-no-live" v-if="item.status === 102">未开始</span>
            <span v-if="item.status === 103" class="head-no-live head-done-live">已结束</span>
            <span v-if="item.status === 104" class="head-no-live head-done-live">禁播</span>
            <span v-if="item.status === 105" class="head-no-live head-done-live">暂停中</span>
            <span v-if="item.status === 106" class="head-no-live head-done-live">异常</span>
            <span v-if="item.status === 107" class="head-no-live head-done-live">已过期</span>
            <span class="head-text">{{item.viewCount || 0}}{{" "}}观看</span>
          </view>
          <view style="background:rgba(0,0,0, .05);height:130rpx;width:100%;bottom:0;position:absolute;">
            <view :data-count="item.viewCount" :data-room_id="item.roomId" :data-id="item.id" @tap.stop="onGotoLive"
              class="live-item-center">
              {{item.liveName}}
            </view>
            <view class="live-item-bottom">
              <view :data-count="item.viewCount" :data-room_id="item.roomId" :data-id="item.id" @tap.stop="onGotoLive"
                class="live-anchor">
                {{item.anchor}}
              </view>
              <view class="live-like">
                <image class="like-gif" v-if="item.clickLike"
                  src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/Live/dong_live.gif"></image>
                <image :data-count="item.likeCount" :data-room_id="item.roomId" :data-id="item.id"
                  @tap.stop="onClickLike" src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/Live/like.png">
                </image>
                {{item.likeCount || 0}}
              </view>
            </view>
          </view>
        </view>
      </block>
      <loading v-if="isFetch"></loading>
      <view class="no-live-data" v-if="liveList.length === 0 && !isFetch">暂无直播!</view>
    </view>
    <u-loading-page v-if="loading" bg-color="rgba(0,0,0,0.4)" loading-text="loading..."></u-loading-page>
    <block v-if="!loading&&total !== 0">
      <view v-if="liveList.length >= total" class="live-tip">到底了~</view>
    </block>
  </view>
</template>

<script lang='ts'>
  import {
    Component,
    Vue
  } from 'vue-property-decorator'
  import {
    getLiveList,
    like,
    view
  } from "@/api/modules/live"; 
  
  declare function requirePlugin(
    /** 需要引入的插件的 alias */
    module: string
  ): any

  const livePlayer = requirePlugin("live-player-plugin");

  @Component({})
  export default class Live extends Vue {
    liveList: Array < any > = []
    current: number = 1
    total: number = 0
    isFetch: boolean = false
    loading: boolean = false

    timer: number
    // 页面周期函数--监听页面加载
    onLoad() {
      this.fetchLiveList(1);
      this.$Pubsub.on("app-launch", () => {
        this.fetchLiveList(1);
      });
    }
    // 页面周期函数--监听页面卸载
    onUnload() {
      clearInterval(this.timer);
    }
    // 页面处理函数--监听用户下拉动作
    onPullDownRefresh() {
      uni.stopPullDownRefresh();
    }
    // 页面处理函数--监听用户上拉触底
    onReachBottom() {
      this.liveList.length < this.total &&
        this.fetchLiveList(this.current + 1, true);
    }

    // 跳转直播间
    onGotoLive(e) {
      const roomId = e.currentTarget.dataset.room_id;
      const id = e.currentTarget.dataset.id;
      let viewCount = e.currentTarget.dataset.count;
      try {
        viewCount = parseInt(viewCount, 10) + 1;
      } catch (err) {
        viewCount = 1;
        console.log(err);
      }
      view({
        id,
        viewCount
      }).then(() => this.fetchLiveList());
      uni.navigateTo({
        url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}`,
      });
    }

    // 点赞
    onClickLike(e) {
      const roomId = e.currentTarget.dataset.room_id;
      const id = e.currentTarget.dataset.id;
      let likeCount = e.currentTarget.dataset.count;
      try {
        likeCount = parseInt(likeCount, 10) + 1;
      } catch (err) {
        likeCount = 1;
      }
      const liveList = this.liveList;
      liveList.forEach(v => {
        if (v.roomId + "" === roomId + "") {
          v.clickLike = true;
        }
      });
      this.setData({
        liveList,
      });
      setTimeout(() => {
        liveList.forEach(v => {
          if (v.roomId + "" === roomId + "") {
            v.clickLike = false;
            v.likeCount = likeCount;
          }
        });
        this.setData({
          liveList,
        });
        like({
          id,
          likeCount
        });
      }, 400);
    }

    /* 获取直播列表 */
    async fetchLiveList(current = 1, isMore = false) {
      this.setData({
        isFetch: isMore ? false : true,
        loading: isMore ? true : false,
      });
      const res = await getLiveList({
        current,
        size: 20,
      });
      this.setData({
        liveList: isMore ? [...this.liveList, ...(res.list || [])] : res.list,
        current: res.current,
        total: res.total,
        isFetch: false,
        loading: false,
      });
      setTimeout(() => {
        this.updateStatus();
        clearInterval(this.timer);
        this.timer = setInterval(this.updateStatus, 1000 * 60);
      }, 100);
    }

    // 更新直播状态
    async updateStatus() {
      const liveList = [...this.liveList];
      const asyncArrs: any[] = liveList.map(v => {
        return livePlayer.getLiveStatus({
          room_id: v.roomId
        });
      });
      const arrRes = await Promise.all(asyncArrs);
      const list = liveList.map((v, i) => {
        v.status = arrRes[i].liveStatus;
        return v;
      })
      this.setData({
        liveList: {
          ...list
        },
      });
    }
  }
</script>

<style lang="scss" scoped>
  @include b(live-loading) {
    width: 100%;
    height: 100rpx;
  }

  @include b(live-tip) {
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    color: #b0b0b0;
    font-size: 24rpx;

    @include e(loadMore) {
      background-color: #ffffff;
      color: #333333;
    }
  }

  @include b(live-list) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 24rpx;
  }

  @include b(live-list-item) {
    width: 49%;
    height: 380rpx;
    margin-bottom: 14rpx;
    position: relative;

    >image {
      width: 100%;
      height: 100%;
      background-color: #666;
      object-fit: cover;
    }
  }

  @include b(live-item-head) {
    position: absolute;
    top: 8rpx;
    left: 16rpx;

    image {
      width: 90rpx;
      height: 30rpx;
      vertical-align: middle;
    }
  }

  @include b(live-item-bottom) {
    position: absolute;
    bottom: 16rpx;
    padding: 0 16rpx;
    display: flex;
    justify-content: space-between;
    line-height: 40rpx;
    font-size: 24rpx;
    width: 100%;
    height: 40rpx;
    color: #fff;

    image {
      width: 30rpx;
      height: 30rpx;
      vertical-align: middle;
    }
  }

  @include b(live-like) {
    position: relative;
  }

  @include b(like-gif) {
    width: 400rpx !important;
    height: 200rpx !important;
    position: absolute;
    bottom: 30rpx;
    right: -100rpx;
  }

  @include b(head-text) {
    display: inline-block;
    vertical-align: middle;
    line-height: 30rpx;
    font-size: 22rpx;
    padding: 0 12rpx;
    color: #fff;
    background-color: rgba(0, 0, 0, .1);
  }

  @include b(live-item-center) {
    color: #fff;
    font-size: 24rpx;
    bottom: 90rpx;
    left: 16rpx;
    position: absolute;
  }

  @include b(head-live) {
    background-image: url(http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/Live/dong.png);
    overflow: hidden;
    background-position: center;
    ;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-size: 22rpx;
    line-height: 30rpx;
    color: #fff;
    padding: 0 12rpx;

    image {
      width: 24rpx;
      height: 22rpx;
      vertical-align: middle;
    }
  }

  @include b(head-no-live) {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-size: 22rpx;
    line-height: 30rpx;
    color: #fff;
    padding: 0 12rpx;
    padding-left: 24rpx;
    background-color: rgba(0, 226, 100, 1);

    &::before {
      content: '';
      width: 8rpx;
      height: 8rpx;
      border-radius: 8rpx;
      display: block;
      position: absolute;
      left: 8rpx;
      top: 50%;
      margin-top: -4rpx;
      background-color: #fff;
    }
  }

  .head-done-live {
    background-color: #666;
  }

  @include b(no-live-data) {
    text-align: center;
    line-height: 400rpx;
    width: 100%;
  }
</style>